import React, { useState } from 'react';

const LOGO = '/mylogo.png';

export default function Sidebar({ 
  sessions = [], 
  currentSessionId, 
  onSessionSelect, 
  onCreateSession, 
  onDeleteSession, 
  onRenameSession,
  user,
  onLogout
}) {
  const [editingSessionId, setEditingSessionId] = useState(null);
  const [editingName, setEditingName] = useState('');

  const handleStartEdit = (session) => {
    setEditingSessionId(session.sessionId);
    setEditingName(session.sessionName);
  };

  const handleSaveEdit = () => {
    if (editingName.trim()) {
      onRenameSession(editingSessionId, editingName.trim());
    }
    setEditingSessionId(null);
    setEditingName('');
  };

  const handleCancelEdit = () => {
    setEditingSessionId(null);
    setEditingName('');
  };

  return (
    <div style={{
      width: 280,
      background: '#2c3e50', // 深蓝灰色背景
      color: '#FFFFFF',
      display: 'flex',
      flexDirection: 'column',
      padding: '20px 0',
      boxSizing: 'border-box',
      boxShadow: '2px 0 8px rgba(0,0,0,0.1)'
    }}>
      {/* 头部 */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        marginBottom: 20,
        padding: '0 20px'
      }}>
        <img src={LOGO} alt="logo" style={{ 
          width: 48, 
          height: 48, 
          borderRadius: 12, 
          marginBottom: 12 
        }} />
        <div style={{ 
          fontWeight: 'bold', 
          fontSize: 18, 
          textAlign: 'center' 
        }}>小云助手</div>
      </div>

      {/* 新建会话按钮 */}
      <div style={{ padding: '0 20px', marginBottom: 20 }}>
        <button
          onClick={onCreateSession}
          style={{
            width: '100%',
            padding: '12px 16px',
            background: '#3498db',
            color: 'white',
            border: 'none',
            borderRadius: 8,
            fontSize: 14,
            fontWeight: 'bold',
            cursor: 'pointer',
            transition: 'background 0.2s'
          }}
          onMouseOver={e => e.target.style.background = '#2980b9'}
          onMouseOut={e => e.target.style.background = '#3498db'}
        >
          + 新建会话
        </button>
      </div>

      {/* 会话列表 */}
      <div style={{
        flex: 1,
        overflowY: 'auto',
        padding: '0 10px'
      }}>
        <div style={{ 
          fontSize: 12, 
          color: '#bdc3c7', 
          marginBottom: 10,
          padding: '0 10px'
        }}>
          会话列表
        </div>
        
        {sessions.length === 0 ? (
          <div style={{
            textAlign: 'center',
            color: '#7f8c8d',
            fontSize: 12,
            padding: '20px 10px'
          }}>
            暂无会话，点击上方按钮创建新会话
          </div>
        ) : (
          sessions.map(session => (
            <div
              key={session.sessionId}
              style={{
                margin: '0 0 8px 0',
                padding: '12px',
                borderRadius: 8,
                background: currentSessionId === session.sessionId ? '#34495e' : 'transparent',
                cursor: 'pointer',
                transition: 'background 0.2s',
                border: currentSessionId === session.sessionId ? '1px solid #3498db' : '1px solid transparent'
              }}
              onMouseOver={e => {
                if (currentSessionId !== session.sessionId) {
                  e.target.style.background = '#34495e';
                }
              }}
              onMouseOut={e => {
                if (currentSessionId !== session.sessionId) {
                  e.target.style.background = 'transparent';
                }
              }}
              onClick={() => onSessionSelect(session.sessionId)}
            >
              {editingSessionId === session.sessionId ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <input
                    type="text"
                    value={editingName}
                    onChange={e => setEditingName(e.target.value)}
                    style={{
                      background: '#2c3e50',
                      border: '1px solid #3498db',
                      borderRadius: 4,
                      color: 'white',
                      padding: '4px 8px',
                      fontSize: 13
                    }}
                    onKeyPress={e => e.key === 'Enter' && handleSaveEdit()}
                    autoFocus
                  />
                  <div style={{ display: 'flex', gap: 4 }}>
                    <button
                      onClick={e => {
                        e.stopPropagation();
                        handleSaveEdit();
                      }}
                      style={{
                        padding: '2px 8px',
                        fontSize: 10,
                        background: '#27ae60',
                        color: 'white',
                        border: 'none',
                        borderRadius: 3,
                        cursor: 'pointer'
                      }}
                    >
                      保存
                    </button>
                    <button
                      onClick={e => {
                        e.stopPropagation();
                        handleCancelEdit();
                      }}
                      style={{
                        padding: '2px 8px',
                        fontSize: 10,
                        background: '#95a5a6',
                        color: 'white',
                        border: 'none',
                        borderRadius: 3,
                        cursor: 'pointer'
                      }}
                    >
                      取消
                    </button>
                  </div>
                </div>
              ) : (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontSize: 14,
                      fontWeight: currentSessionId === session.sessionId ? 'bold' : 'normal',
                      whiteSpace: 'nowrap',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis'
                    }}>
                      {session.sessionName}
                    </div>
                    <div style={{
                      fontSize: 11,
                      color: '#bdc3c7',
                      marginTop: 2
                    }}>
                      {new Date(session.createTime).toLocaleDateString()}
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 4, marginLeft: 8 }}>
                    <button
                      onClick={e => {
                        e.stopPropagation();
                        handleStartEdit(session);
                      }}
                      style={{
                        background: 'transparent',
                        border: 'none',
                        color: '#bdc3c7',
                        cursor: 'pointer',
                        padding: '2px 4px',
                        borderRadius: 3,
                        fontSize: 12
                      }}
                      title="重命名"
                    >
                      ✏️
                    </button>
                    <button
                      onClick={e => {
                        e.stopPropagation();
                        if (window.confirm('确定要删除这个会话吗？')) {
                          onDeleteSession(session.sessionId);
                        }
                      }}
                      style={{
                        background: 'transparent',
                        border: 'none',
                        color: '#e74c3c',
                        cursor: 'pointer',
                        padding: '2px 4px',
                        borderRadius: 3,
                        fontSize: 12
                      }}
                      title="删除"
                    >
                      🗑️
                    </button>
                  </div>
                </div>
              )}
            </div>
          ))
        )}
      </div>

      {/* 用户信息和退出登录 */}
      {user && (
        <div style={{
          padding: '15px 20px',
          borderTop: '1px solid #34495e',
          marginTop: 'auto'
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginBottom: '10px'
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#ecf0f1',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
              }}>
                {user.nickname || user.username}
              </div>
              <div style={{
                fontSize: '11px',
                color: '#bdc3c7',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
              }}>
                {user.email}
              </div>
            </div>
            <button
              onClick={onLogout}
              style={{
                background: 'transparent',
                border: 'none',
                color: '#e74c3c',
                cursor: 'pointer',
                padding: '4px 8px',
                borderRadius: '4px',
                fontSize: '12px',
                transition: 'background 0.2s'
              }}
              onMouseOver={e => e.target.style.background = '#34495e'}
              onMouseOut={e => e.target.style.background = 'transparent'}
              title="退出登录"
            >
              退出
            </button>
          </div>
        </div>
      )}

      {/* 底部版权 */}
      <div style={{ 
        fontSize: 12, 
        color: '#7f8c8d', 
        textAlign: 'center',
        padding: '10px 20px'
      }}>
        © 2025 小云
      </div>
    </div>
  );
}
